<template>
  <view style="padding-bottom: calc(var(--window-bottom) + 60px)">
    <view style="background-color: #f1f1f1">
      <scroll-view scroll-x scroll-with-animation style="white-space: nowrap" :scroll-left="scrollLeftp" @touchstart="touchStart" @scroll="touchMove" @touchend="touchEnd">
        <view style="width: 100%; display: inline-block; position: relative">
          <view class="bg-gradual-blue radius margin-sm padding" style="position: relative; overflow: hidden; z-index: 5">
            <view class="text-bold" style="font-size: 55rpx">初级会员</view>
            <view class="margin-sm" style="white-space: normal; height: 50px">免费使用平台所有功能，升级会员等级可以获得更高的折扣！</view>
            <view class="cu-btn round text-orange shadow-blur">
              滑动解锁更多等级
              <text class="cuIcon cuIcon-back_android jiantou margin-left-sm" style="font-size: 18px"></text>
            </view>

            <view class="actions">
              <text class="name bg-red text-white" v-show="level == 0">当前等级</text>
            </view>
          </view>
          <view class="xiabei one"></view>
        </view>
        <view style="width: 100%; display: inline-block; position: relative">
          <view class="bg-gradual-green radius margin-sm padding" style="position: relative; overflow: hidden; z-index: 5">
            <view class="text-bold" style="font-size: 55rpx">中级会员</view>
            <view class="margin-sm" style="white-space: normal; height: 50px">获得中级会员权益，享受核销折扣加成，推广更赚钱！</view>
            <view class="cu-btn round text-orange shadow-blur">
              升级后平均每笔多赚{{ spredList.onerate }}%
              <text class="cuIcon cuIcon-back_android jiantou margin-left-sm" style="font-size: 18px"></text>
            </view>
            <view class="derdge bg-white padding-xs shadow-blur" @tap="openinterests" :data-id="1" v-show="spredList.oneprice > 0 && level == 0">开通权益</view>

            <view class="actions">
              <text class="name bg-red text-white" v-if="level == 1">当前等级</text>
              <text class="name bg-black text-white" v-else-if="level < 1">未解锁</text>
            </view>
          </view>
          <view class="xiabei two"></view>
        </view>
        <view style="width: 100%; display: inline-block; position: relative">
          <view class="bg-gradual-orange radius margin-sm padding" style="position: relative; overflow: hidden; z-index: 5">
            <view class="text-bold" style="font-size: 55rpx">高级会员</view>
            <view class="margin-sm" style="white-space: normal; height: 50px">获得高级会员权益，享受核销折扣加成，推广更赚钱！</view>
            <view class="cu-btn round text-orange shadow-blur">
              升级后平均每笔多赚{{ spredList.tworate }}%
              <text class="cuIcon cuIcon-back_android jiantou margin-left-sm" style="font-size: 18px"></text>
            </view>
            <view class="derdge bg-white padding-xs shadow-blur" @tap="openinterests" :data-id="2" v-show="spredList.twoprice > 0 && level < 2">开通权益</view>

            <view class="actions">
              <text class="name bg-gradual-red text-white" v-if="level == 2">当前等级</text>
              <text class="name bg-black text-white" v-else-if="level < 2">未解锁</text>
            </view>
          </view>
          <view class="xiabei three"></view>
        </view>
        <view style="width: 100%; display: inline-block; position: relative">
          <view class="bg-gradual-purple radius margin-sm padding" style="position: relative; overflow: hidden; z-index: 5">
            <view class="text-bold" style="font-size: 55rpx">尊贵会员</view>
            <view class="margin-sm" style="white-space: normal; height: 50px">获得尊贵会员权益，享受核销折扣加成，推广更赚钱！</view>
            <view class="cu-btn round text-orange shadow-blur">升级后平均每笔多赚{{ spredList.threerate }}%</view>
            <view class="derdge bg-white padding-xs shadow-blur" @tap="openinterests" :data-id="3" v-show="spredList.threeprice > 0 && level < 3">开通权益</view>

            <view class="actions">
              <text class="name bg-gradual-red text-white" v-if="level == 3">当前等级</text>
              <text class="name bg-black text-white" v-else-if="level < 3">未解锁</text>
            </view>
          </view>
          <view class="xiabei frou"></view>
        </view>
      </scroll-view>
      <view class="margin-sm bg-white radius">
        <view class="cu-bar solid-bottom margin-top">
          <view class="action">
            <text class="cuIcon-title text-blue"></text>
            会员权益
          </view>
        </view>
        <view class="cu-list grid col-4 padding-sm radius">
          <view class="cu-item padding-sm" v-for="(item, index) in huiyuan" :key="index">
            <view class="text-center text-cyan text-shadow">
              <view class="text-xxl" :class="item.icon"></view>
              <text class="text-black">{{ item.title }}</text>
            </view>
            <view class="suo bg-white" v-show="TabCur < item.type">
              <text class="cuIcon-info" style="font-size: 33px"></text>
            </view>
          </view>
        </view>
      </view>
      <view class="margin-sm bg-white radius">
        <view class="cu-bar solid-bottom margin-top">
          <view class="action">
            <text class="cuIcon-title text-blue"></text>
            权益规则
          </view>
        </view>
        <view class="padding-sm radius">
          <view class="text-orange kuang padding-xs margin-bottom-xs" v-show="spredList.xiaok > 0">成功核销卡卷面值{{ spredList.xiaok }}的推广会员才是有效推广.</view>
          <view class="" v-if="TabCur == 0">
            <view class="text-gray">用户注册即可使用平台所有功能，</view>
          </view>
          <view class="" v-else-if="TabCur == 1">
            <view class="text-gray">用户注册即可使用平台所有功能，</view>
            <view class="quanyi padding-xs margin-top-xs" v-show="spredList.onenum > 0">需要{{ spredList.onenum }}个有效推广,即可获得此权益</view>
            <view class="quanyi padding-xs margin-top-xs" v-show="spredList.oneprice > 0">
              补差价
              <text class="text-price text-red margin-left-xs margin-right-xs">{{ spredList.oneprice }}</text>
              开通此权益
            </view>
            <view class="margin-top-sm text-gray">
              获得权益后可获得每个有效推广每次核销卡卷面值 约
              <text class="text-red">{{ spredList.onerate }}%</text>
              的佣金
            </view>
          </view>
          <view class="" v-else-if="TabCur == 2">
            <view class="quanyi padding-xs margin-top-xs" v-show="spredList.twonum > 0">需要{{ spredList.twonum }}个有效推广,即可获得此权益</view>
            <view class="quanyi padding-xs margin-top-xs" v-show="spredList.twoprice > 0">
              补差价
              <text class="text-price text-red margin-left-xs margin-right-xs">{{ spredList.twoprice }}</text>
              开通此权益
            </view>
            <view class="margin-top-sm text-gray">
              获得权益后可获得每个有效推广每次核销卡卷面值 约
              <text class="text-red">{{ spredList.tworate }}%</text>
              的佣金
            </view>
          </view>
          <view class="" v-else-if="TabCur == 3">
            <view class="quanyi padding-xs margin-top-xs" v-show="spredList.threenum > 0">需要{{ spredList.threenum }}个有效推广,即可获得此权益</view>
            <view class="quanyi padding-xs margin-top-xs" v-show="spredList.threeprice > 0">
              补差价
              <text class="text-price text-red margin-left-xs margin-right-xs">{{ spredList.threeprice }}</text>
              开通此权益
            </view>
            <view class="margin-top-sm text-gray">
              获得权益后可获得每个有效推广每次核销卡卷面值 约
              <text class="text-red">{{ spredList.threerate }}%</text>
              的佣金
            </view>
          </view>
        </view>
      </view>

      <view class="margin-sm bg-white radius">
        <view class="cu-bar solid-bottom margin-top">
          <view class="action">
            <text class="cuIcon-title text-blue"></text>
            推广分润
          </view>
        </view>
        <view class="cu-list grid col-3 padding-sm radius">
          <view class="cu-item bg-cyan" style="border: rgb(217 217 217) 1px solid; border-bottom: 0; border-right: 0; padding: 10rpx 0">推广方式</view>
          <view class="cu-item bg-cyan" style="border: rgb(217 217 217) 1px solid; border-bottom: 0; border-right: 0; padding: 10rpx 0">权益佣金</view>
          <view class="cu-item bg-cyan" style="border: rgb(217 217 217) 1px solid; border-bottom: 0; padding: 10rpx 0">订单佣金</view>
          <view class="cu-item" style="border: rgb(217 217 217) 1px solid; border-right: 0; padding: 10rpx 0">
            <text>直推</text>
          </view>
          <view class="cu-item" style="border: rgb(217 217 217) 1px solid; border-right: 0; padding: 10rpx 0">
            <text class="text-price" style="color: #f87c61">{{ parseFloat(smoney.quanyi).toFixed(2) }}</text>
          </view>
          <view class="cu-item" style="border: rgb(217 217 217) 1px solid; padding: 10rpx 0">
            <text class="text-price" style="color: #f87c61">{{ parseFloat(smoney.yongjin).toFixed(2) }}</text>
          </view>
        </view>
      </view>
      <view class="posfoot bg-white shadow-blur" style="box-shadow: 0 -1px 3px rgb(0 0 0 / 10%)">
        <view class="padding-sm flex flex-direction" style="padding-top: 0; padding-bottom: 0">
          <button class="cu-btn bg-red margin-tb-sm lg" @tap="haibao">{{ haibaoStr }}</button>
        </view>
      </view>
      <view class="cu-modal" :class="modalName == 'openvip' ? 'show' : ''">
        <view class="cu-dialog">
          <view class="cu-bar bg-white justify-end">
            <view class="content">升级权益</view>
            <view class="action" @tap="hideModal">
              <text class="cuIcon-close text-red"></text>
            </view>
          </view>
          <view class="padding-xl">
            <view>
              当前升级为
              <text class="text-orange margin-xs">{{ quanyiname }}</text>
              ,需
              <text v-show="level > 0">补差价</text>
              支付
              <text class="text-price text-orange margin-left-xs">{{ money }}</text>
            </view>
          </view>
          <view class="cu-bar bg-white">
            <view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
            <view class="action margin-0 flex-sub solid-left" @tap="goPay">确定</view>
          </view>
        </view>
      </view>
      <view class="cu-modal" :class="modalName == 'haibaoMedal' ? 'show' : ''">
        <view class="cu-dialog">
          <view class="weizhi round text-center text-xxl shadow" @click="hideModal()">
            <text class="text-center" style="line-height: 30px">×</text>
          </view>
          <img :src="img" class="imgto" @longpress="press" />
          <view class="margin-xs" style="margin-bottom: 10px">
            <text class="text-pink">长按图片保存</text>
          </view>
        </view>
      </view>
    </view>
    <canvas class="canvass" canvas-id="firstCanvas" id="firstCanvas"></canvas>
    <v-kefu></v-kefu>
  </view>
</template>

<script>
import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js';
import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js';
import kefu from '@/components/kefu.vue';
export default {
  components: {
    'v-kefu': kefu
  },
  data() {
    return {
      cardCur: 0,
      smoney: {},
      huiyuan: [
        { id: 1, title: '专属客服', icon: 'cuIcon-service', type: 0 },
        { id: 2, title: '专属海报', icon: 'cuIcon-pic', type: 0 },
        { id: 3, title: '会员价格', icon: 'cuIcon-crown', type: 1 },
        { id: 4, title: '推广赚钱', icon: 'cuIcon-group_fill', type: 1 },
        { id: 5, title: '额外折扣', icon: 'cuIcon-recharge', type: 2 },
        { id: 6, title: '分润加成', icon: 'cuIcon-sponsor', type: 2 },
        { id: 7, title: '顶级政策', icon: 'cuIcon-medal', type: 3 },
        { id: 8, title: '活动奖励', icon: 'cuIcon-redpacket', type: 3 }
      ],
      loading: true,
      scrollLeftp: 0,
      TabCur: 0,
      level: 0,
      loading: false,
      spredList: [],
      istouchStart: false,
      modalName: null,
      quanyiname: null,
      money: 0,
      quanyiid: 0,
      ishaibao: false,
      size: 100,
      haibaoStr: '海报准备中...',
      img: null,
      url: null,
      margin: 10,
      backgroundColor: '#FFFFFF',
      foregroundColor: '#000000',
      tupath: null
    };
  },
  onLoad() {
    this.getUser();
  },
  onReady() {
    this.getQrcodeurl();
  },
  methods: {
    press(e) {
      console.log(e);
      // #ifdef APP
      var that = this;
      uni.showModal({
        title: '保存图片',
        content: '确认保存图片到相册吗？',
        success: function (res) {
          if (res.confirm) {
            that.saveimg();
          }
        }
      });
      // #endif
    },
    saveimg() {
      var that = this;
      uni.saveImageToPhotosAlbum({
        filePath: that.tupath,
        success: (res) => {
          that.modalName = null;
          that.app.showMsg('保存成功');
        },
        fail: (res) => {
          that.app.showMsg(res);
        }
      });
    },
    getQrcodeurl() {
      var that = this;
      uni.request({
        url: that.app.apiHost + '/qrcodeurl',
        method: 'post',
        header: { Authorization: 'bearer ' + that.app.getAuthCode() },
        success: (data) => {
          console.log(data.data);
          if (data.data.code == 0) {
            let gv = JSON.parse(uni.getStorageSync('users'));
            that.url = data.data.data.wapurl + '?code=' + gv.id;
            let res = data.data.data;
            let xx = parseInt(res.repeatx);
            let yy = parseInt(res.repeaty);
            that.shengcheng(res.img64, xx, yy);
          } else {
            that.app.showMsg('链接失败');
          }
        },
        fail(a) {
          that.app.showMsg('链接失败');
        }
      });
    },
    shengcheng(imgurl, xs, ys) {
      var that = this;
      const ctx = uni.createCanvasContext('firstCanvas');
      ctx.drawImage(imgurl, 0, 0, 380, 500);
      let modules = uQRCode.getModules({
        text: that.url,
        errorCorrectLevel: uQRCode.errorCorrectLevel.H
      });
      console.log(that.url);
      let tileSize = (that.size - that.margin * 2) / modules.length;
      // 获取绘图所需的上下文
      // 开始绘制
      ctx.setFillStyle(that.backgroundColor);
      for (var row = 0; row < modules.length; row++) {
        for (var col = 0; col < modules.length; col++) {
          var x = col * tileSize + that.margin + xs;
          var y = row * tileSize + that.margin + ys;
          var w = tileSize;
          var h = tileSize;
          var style = modules[row][col] ? that.foregroundColor : that.backgroundColor;
          ctx.setFillStyle(style);
          ctx.fillRect(x, y, w, h);
        }
      }
      ctx.draw(false, function (e) {
        console.log(e);
        uni.canvasToTempFilePath({
          canvasId: 'firstCanvas',
          success(res) {
            // #ifdef APP
            that.tupath = res.tempFilePath;
            pathToBase64(res.tempFilePath)
              .then((base64) => {
                that.img = base64;
                console.log(that.img, 'app');
              })
              .catch((error) => {
                console.error(error);
              });
            // #endif

            // #ifdef H5
            that.img = res.tempFilePath;
            console.log(that.img, 'h5');
            // #endif
          },
          fail(result) {
            console.log(result);
          }
        });
        that.haibaoStr = '获取分享海报';
        that.ishaibao = true;
      });
    },
    hideModal() {
      this.modalName = null;
    },
    haibao() {
      if (this.ishaibao === false) {
        this.app.showMsg('正在生成海报请稍等');
        return;
      }
      this.modalName = 'haibaoMedal';
    },
    cardSwiper(e) {
      this.cardCur = e.detail.current;
    },
    getUser() {
      var that = this;
      uni.request({
        url: that.app.apiHost + '/assindex',
        method: 'POST',
        header: { Authorization: 'bearer ' + that.app.getAuthCode() },
        success: (res) => {
          console.log(res.data);
          if (res.data.code == -1) {
            that.app.showMsg('请登陆后再操作!', '../login/login');
          }
          if (res.data.code == 0) {
            that.level = res.data.data.userlevel;
            that.spredList = res.data.data.spred;
            that.smoney = res.data.data.smoney;
            let width = 0;
            uni.getSystemInfo({
              success: (e) => {
                width = e.windowWidth;
              }
            });
            console.log(width);
            that.TabCur = that.level;
            that.scrollLeftp = that.TabCur * width;
            console.log(that.scrollLeftp);
          }
        },
        fail(res) {
          console.log(res);
        }
      });
    },
    openinterests(e) {
      console.log(e.target.dataset.id);
      let shi = 0;
      switch (this.level) {
        case 1:
          shi = this.spredList.oneprice;
          break;
        case 2:
          shi = this.spredList.twoprice;
          break;
      }
      switch (e.target.dataset.id) {
        case 1:
          this.money = this.spredList.oneprice;
          this.quanyiname = '中级会员权益';
          break;
        case 2:
          this.money = parseInt(this.spredList.twoprice - shi);
          this.quanyiname = '高级会员权益';
          break;
        case 3:
          this.money = parseInt(this.spredList.threeprice - shi);
          this.quanyiname = '尊贵会员权益';
          break;
      }
      this.quanyiid = e.target.dataset.id;
      this.modalName = 'openvip';
    },
    goPay() {
      this.modalName = null;
      uni.showLoading({
        mask: true
      });
      var _this = this;
      uni.request({
        url: _this.app.apiHost + '/gouvip',
        method: 'POST',
        header: { Authorization: 'bearer ' + _this.app.getAuthCode() },
        data: { type: _this.quanyiid },
        success: (res) => {
          if (res.data.code == -1) {
            _this.app.showMsg('请登陆后再操作!', '../login/login');
          }
          if (res.data.code == 0) {
            _this.level = res.data.userlevel;
            _this.app.showMsg('开通成功');
          } else {
            _this.app.showMsg(res.data.msg);
          }
        },
        fail(e) {
          _this.app.showMsg('链接失败');
        }
      });
    },
    tabchang(id) {
      let width = 0;
      uni.getSystemInfo({
        success: (e) => {
          width = e.windowWidth;
        }
      });
      this.TabCur = id;
      if (id < 0) this.TabCur = 0;
      this.scrollLeftp = this.TabCur * width;
    },
    touchStart(event) {
      this.istouchStart = false;
      this.startX = 0;
    },
    touchMove(event) {
      this.istouchStart = true;
      var currentX = Math.abs(event.detail.scrollLeft);
      var moveX = currentX - this.startX;
      var text = '';
      var state = 0; //-1：左滑，0：没滑动，1：右滑
      if (event.detail.deltaX < 0) {
        text = '左滑';
        state = 1;
      } else {
        text = '右滑';
        state = -1;
      }
      this.like_state = state;
      this.moveX = moveX;
    },
    touchEnd(event) {
      console.log(this.moveX, this.like_state, '???');
      if (Math.abs(this.moveX) > 30 && this.like_state != -100 && this.istouchStart === true) {
        var state = this.like_state;
        this.like_state = -100; //设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动
        console.log(this.moveX, this.like_state);
        if (state == 1) {
          this.tabchang(this.TabCur + 1);
        } else {
          this.tabchang(this.TabCur - 1);
        }
        this.moveX = 0;
      }
    }
  }
};
</script>

<style>
page {
  background-color: #f1f1f1;
}
canvas {
  position: absolute;
}
.name {
  width: 100px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  right: -52rpx;
  top: 15px;
  text-align: center;
  font-size: 12px;
  display: block;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 1px solid #fff;
}

.jiantou {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.derdge {
  position: absolute;
  right: 0;
  bottom: 20%;
  border-top-left-radius: 40rpx;
  border-bottom-left-radius: 40rpx;
  padding-left: 30rpx;
}
.xiabei {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: -3%;
  border-radius: 5px;
  opacity: 0.2;
  -webkit-transform: scale(0.9, 0.9);
  transform: scale(0.9, 0.9);
}
.one {
  background-color: #0c9ade;
}
.two {
  background-color: #5bbb45;
}
.three {
  background-color: #f87c61;
}
.frou {
  background-color: #6b00ff;
}
.suo {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  display: flex;
  align-content: center;
  align-items: center;
}

.kuang {
  box-shadow: rgb(0 0 0 / 10%) 0px -1px 3px;
  background-color: #f87c61;
  color: #fff;
  border-radius: 5px;
}
.quanyi {
  border-bottom: #f87c61 1px dashed;
}
.posfoot {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.bg-img {
  width: 100%;
  height: 80%;
}
.canvass {
  height: 500px;
  width: 380px;
  top: 10000px;
  position: fixed;
  z-index: -10;
}
.imgto {
  width: 100%;
}
</style>
